<template>
	<div class="mainContent">
		<pathTracking :path='Model.path' />
		<div class="deliverynoti-container">
			<div class="bgWhite bgRadius">
				<card :configArr="Model.configArr"></card>
				<el-row>
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl">查询条件</div>
					</div>
				</el-row>
				<!-- 高级搜索 -->
				<advancedSearch :option="Model.filterOption" @getChild="showChild" @onSearch="toSearch" @onClear="toClear" @onExport="toExport"></advancedSearch>
			</div>
			<!-- 表格 -->
			<div class="table">
				<el-row>
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl">采购订单列表</div>
						<div class="common-btn-group">
							<div class="common-table-btn-item">导出</div>
						</div>
					</div>
				</el-row>
				<el-row class="table-bg">
					<el-table :data="Model.tableData" stripe border style="width: 100%" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="50" fixed></el-table-column>
						<el-table-column fixed prop="purchaseVoucherNo" label="采购订单号" width="180">
							<template slot-scope="scope">
								<el-button type="text"  @click="tableDetail(scope.row)">{{scope.row.purchaseVoucherNo}}</el-button>
							</template>
						</el-table-column>
						<el-table-column 
							v-for="(item,index) in Model.tableHeaderData"
							:key="item.prop"
							:prop="item.prop" 
							:label="item.label" 
							:width="item.width" 
							:sortable="item.sortable"
						></el-table-column>
						<el-table-column fixed="right" :label="$t('common.handleOption')" width="200">
							<template slot-scope="scope">
								<div class="btnGroup">
                                    <div v-if="scope.row.orderStatus == 1">
                                        <div @click="agreeStart(scope.row)" class="operate-btn">同意接单</div>
                                        <div class="operate-btn" @click="Model.refuseReason = true">拒绝接单</div>
                                    </div>
									<div v-if="scope.row.orderStatus == 2 || scope.row.orderStatus == 3 || scope.row.orderStatus == 4 || scope.row.orderStatus == 5 || scope.row.orderStatus == 6 " @click="changeDetail(scope.row)" class="operate-btn">处理变更</div>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</el-row>
				<!-- 分页 -->
				<el-row class="pagination-cont">
				    <el-pagination
						@size-change="handleSizeChange"
						background
						@current-change="handleCurrentChange"
						:current-page="Model.paginationObject.currentPage"
						:page-sizes="[10, 20, 30, 40]"
						:page-size="Model.paginationObject.pageSize"
						:pager-count="5"
						layout="sizes, prev, pager, next, jumper, slot"
						:total="Model.paginationObject.total">
						<div class="pagination-slot">
							显示
							<p class="slot-i">{{Model.paginationObject.num1}}</p>
							到
							<p class="slot-i">{{Model.paginationObject.num2}}</p>
							，共
							<p class="slot-i">{{Model.paginationObject.total}}</p>
							记录
						</div>
				    </el-pagination>
				</el-row>	
			</div>
		</div>
		<!-- 拒绝原因弹窗 -->
		<el-dialog :visible.sync="Model.refuseReason" top="100px" class="refuseReason">
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">拒绝原因</div>
			</div>
			<div class="refuseReasonCort">
				<el-input
					type="textarea"
					:rows="2"
					placeholder="不超过30字"
					maxlength="30"
					v-model="Model.TheReason">
				</el-input>
				<div class="viewDialogFooter">
					<div class="viewDialogFooterSure" @click="sureRefuse">确定</div>
					<div class="viewDialogFooterCancel"  @click="Model.refuseReason = false">取消</div>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import pathTracking from '@/components/common/pathTracking'
	import pagination from "@/components/common/pagination.vue";
	import card from '@/components/common/filterBtns';
	import advancedSearch from "@/components/common/filter/advancedSearch";
	import {
		getDateString
	} from "@/assets/js/common.js"
	import Model from './model.js'
	import Controller from './controller.js'
	export default {
		name: "purchase",
		mixins: [Model, Controller],
		components: {
			advancedSearch,
			pagination,
			pathTracking,
			card
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>